<template>
    <div id="app">
        <!--购物车部分-->
        <div class="cart">
            <div class="cart_title">
                <router-link to="" @click.native="$router.back()"> < 购物车 </router-link>
            </div>
            <!--如果数组为空，就显示-->
            <div class="emptyCar" v-if="arr.length==0">
                <img src="../../public/img/emptyCar.png" alt="">
                <div class="emptyCarTxt">购物车空空如也~~</div>
            </div>
            <div class="cart_list">
                <!--店铺商品-->
                <div class="item" v-for="(val,index) in arr" :key="index">
                    <!--店铺名称部分-->
                    <p><input type="checkbox" @click="storeCheckAll(index)">
                        <span class="iconfont icon-dianpu"></span>{{val.store_name}} >
                    </p>
                    <!--商品信息部分-->
                    <div class="item_content">
                        <!--商品复选框和图片-->
                        <div class="chk_goods">
                            <input type="checkbox" name="chk1">
                            <img :src="val.src" alt="">
                        </div>
                        <!--商品名称，价格，加减，删除，选择尺寸-->
                        <div class="goods_msg">
                            <!--商品名称-->
                            <p>{{val.name}}</p>
                            <!--商品价格，加减，删除-->
                            <div>
                                <span>￥{{val.price}}.00</span>
                                <div class="cul">
                                    <button @click="reduce(index)">-</button>
                                    <span>{{val.num}}</span>
                                    <button @click="add(index)">+</button>
                                </div>
                                <span class="del iconfont icon-shanchu" @click="del(index)"></span>
                            </div>
                            <!--选择尺寸-->
                            <p class="sel">
                                <select name="sel" id="sel" v-model="selec">
                                    <option value="6寸">尺寸:6寸</option>
                                    <option value="8寸">尺寸:8寸</option>
                                    <option value="10寸">尺寸:10寸</option>
                                    <option value="12寸">尺寸:12寸</option>
                                    <option value="14寸">尺寸:14寸</option>
                                </select>
                            </p>
                        </div>
                    </div>
                </div>
                <!--合计部分-->
                <div class="cart_total">
                    <p><input type="checkbox" @click="checkAll($event)">全选</p>
                    <p>合计：<span>￥{{price*num}}.0</span><router-link to="/buyGoods"><input type="submit" value="结算"></router-link></p>
                </div>
            </div>
        </div>
        <div class="empty"></div>
    </div>
</template>
<style lang="less" scoped>
    /* 设置满屏 */
    #app{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #ddd;
    }
    .cart a{
        text-decoration: none;
    }
    /* 购物车头部 */
    .cart .cart_title{
        height: 60px;
        line-height: 60px;
        background: #C25654;
        padding: 0 25px;
    }
    /*购物车字体部分*/
    .cart .cart_title a{
        color: white;
        font-size: 20px;
    }
    /*购物车为空时显示*/
    .cart .emptyCar{
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin:100px auto;
    }
    /* 购物车为空的时候的图片 */
    .cart .emptyCar img{
        width: 100%;
    }
    .cart .emptyCar>div{
        padding: 15px;
        text-align: center;
        color: #aaa;
    }
    .cart_list{
        width: 100%;
        padding: 0 0 20px;
        background: #ddd;
    }
    /* 每个商品盒子 */
    .cart_list .item{
        width: 95%;
        margin:10px auto 0;
        padding: 10px 5px;
        background: white;
        border-radius: 10px;
    }
    /* 店铺名称部分 */
    .cart_list .item p{
        margin-left:5px ;
    }
    /* 店铺名称处的小字体图标 */
    .cart_list .item p span{
        margin-left:10px ;
    }
    /* 商品内容信息 */
    .cart_list .item .item_content{
        display: flex;
        padding: 0 10px;
    }
    /* 商品图片和复选框盒子 */
    .cart_list .item .item_content .chk_goods{
        flex: 1;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-left: 5px;
    }
    /* 商品图片 */
    .cart_list .item .item_content .chk_goods img:last-child{
        width: 100%;
        margin-left: 5px;
    }
    /* 商品信息盒子 */
    .cart_list .item .item_content .goods_msg{
        flex: 3;
        align-items: center;
        padding-left: 20px;
    }
    /*价格，加减按钮，删除*/
    .cart_list .item .item_content .goods_msg>div{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .cart_list .item .item_content .goods_msg p:first-child{
        flex: 1;
        margin: 0 0 10px;
    }
    /* 加减部分 */
    .cart_list .item .item_content .goods_msg .cul{
        flex: 3;
        text-align: right;
        /*margin-left: 1rem;*/
    }
    /*删除的阿里字体图标*/
    .cart_list .item .item_content .goods_msg .del{
        flex: 1;
        text-align: right;
    }
    .cart_list .item .item_content .goods_msg div .cul span{
        display: inline-block;
        width: 35px;
        text-align: center;
    }
    /*选择尺寸*/
    .cart_list .item .item_content .goods_msg select{
        border: none;
        outline: none;
        background: white;
        color: #aaa;
    }
    /*加减部分公共样式*/
    .cul button{
        display: inline-block;
        width: 30px;
        padding:3px 8px;
        background: #eee;
        border: 1px solid #eee;
        outline: none;
    }
    .cul button:first-child{
        border-bottom-left-radius: 10px;
        border-top-left-radius: 10px;
    }
    .cul button:last-child{
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
    }
    /* 加减部分样式 除了最后一个字体图标 */
    .cul span:not(:last-child){
        padding:3px 8px;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }
    /* 全选部分样式 */
    .cart_total{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding:15px 20px;
        background: white;
        position: fixed;
        bottom: 45px;
    }
    /* 总计金额部分 */
    .cart_total p:last-child span{
        margin-right: 25px;
    }
    /* 结算按钮 */
    .cart_total p:last-child input{
        padding: 5px 25px;
        border-radius: 25px;
        outline: none;
        border: none;
        background:  #C25654;
        color: white;
    }
    /*复选框变圆形，引入图片*/
    .cart_list .cart_total p input[type='checkbox']:before{
        content: '';
        position: absolute;
        left: 16px;
        top: 22px;
        width: 18px;
        height: 18px;
        background: url("../../public/img/check3.png") no-repeat center center;
        background-size: 100%;
    }
    .cart_list .cart_total p input[type='checkbox']:checked:before{
        content: '';
        background: url("../../public/img/check4.png") no-repeat center center;
        background-size: 100%;
    }
    /*空盒子*/
    .empty{
        width: 100%;
        height: 120px;
    }
</style>
<script>
    export default {
        name:'Car',
        data(){
            return{
                selec:'10寸',
                price:100,
                num:1,
                arr:[
                    // {store_name:'青青草原蛋糕店',src:'./img/tejia6.png',goods_name:'抹茶奶油蛋糕',price:'118',num:1},
                    // {store_name:'美洋洋蛋糕店',src:'./img/tejia2.png',goods_name:'草莓巧克力蛋糕',price:'128',num:1},
                ]
            }
        },
        methods:{
            // 数量添加
            add(index){
                if(this.arr[index].num<999) {
                    this.arr[index].num++
                }else{
                    this.arr[index].num=999;
                }
            },
            // 数量减少
            reduce(index){
                if(this.arr[index].num>1){
                    this.arr[index].num--;
                }else{
                    this.arr[index].num=1;
                }
            },
            // 全选按钮
            checkAll(ev){
                //获取全选框按钮的状态
                // var state = $(".cart_total input[type='checkbox']").is(":checked");
                var state = ev.target.checked
                // 找到商品部分所有的复选框
                var inputs = $(".item input[type='checkbox']");
                //遍历所有的input商品复选框，让商品复选框状态与全选复选框状态保持一致
                for(var i=0;i<inputs.length;i++){
                    inputs[i].checked=state;
                }
            },
            //店铺全选
            storeCheckAll(index){
                // 获取当前点击对象的状态
                var state = $(".item>p>input[type='checkbox']")[index].checked;
                // var state = ev.target.checked;
                // 找到当前商品部分所有的复选框
                $(".item_content .chk_goods input")[index].checked=state;
            },
            chk(){
                var sum=0;
                // var num=0;
                // var price=0;
                //先查找所有被选中的复选框,遍历
                //  $(".item_content .chk_goods input:checked")
                var inputs = $(".item_content .chk_goods input:checked");
                for(var i=0;i<inputs.length;i++){
                    sum+=$(this).num*$(this).price;
                }
                $(".cart_total p span").innerHTML="￥"+sum;
            },
            del(index){
                if(confirm("您确认要删除此商品吗？")){
                     //删除一条数据
                     this.$store.state.shopCar.splice(index,1);
                     var car = JSON.parse(localStorage.getItem('shopCar'));
                     car.splice(index,1);
                     localStorage["shopCar"] = JSON.stringify(car); 
                     this.$store.state.shopCar = car;
                }
            },
            size(index){
               this.selec = this.arr[index].cakeSize
            }
        },
        mounted(){
            // if(localStorage['user']!=null){   //如果本地中有值
            //     //发起axios请求，获取当前用户对应的购物车
            //     this.$axios.post('http://localhost:3000/showCar',"username="+localStorage['user']).then((data)=>{
            //         // console.log(000);  //不能在数据返回之前打印其他数据
            //         // console.log(JSON.parse(data.data[0].shopCar));
            //         this.$store.state.shopCar = JSON.parse(data.data[0].shopCar);
            //     }).catch((err) => {
            //         console.log(err);
            //     })
            // }
            this.arr = this.$store.state.shopCar;//将数据库中的数据替换原先遍历的数据
            localStorage.setItem('shopCar', JSON.stringify(this.arr));  //将购物车中json数组转为json字符串传到本地

        }
    }
</script>